<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        总结：
            v-for指令：
                1.用于展示列表数据
                2.语法：v-for="(item, index) in xxx" :key="yyy"
                3.可遍历：数组、对象、字符串(用的少)、指定次数(用的少)
     -->

    <div id ="app">
        <h2>人员列表</h2>
        <ul>
            <li v-for="person in persons" :key="person.id">
                {{person.name}}-{{person.age}}-{{person.id}}
            </li>

            <li v-for="(person, index) in persons" :key="index">
                {{person.name}}-{{person.age}}-{{index}}
            </li>
        </ul>

        <br>

        <h2>遍历对象-汽车信息</h2>
        <ul>
            <li v-for="(value, k) of car" :key="k">
                {{k}}-{{value}}
            </li>
        </ul>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        const vm = new Vue({
            el: '#app',
            // 自定义属性
            data: {
                persons:[
                    {
                        id:'001',
                        name:'张三',
                        age:18
                    },
                    {
                        id:'002',
                        name:'李四',
                        age:19
                    },
                    {
                        id:'003',
                        name:'王五',
                        age:20
                    },
                ],
                car:{
                    name:'奥迪A8',
                    price:'70W',
                    color:'黑色'
                }
            },
            // 自定义计算属性
            computed: {},
            // 自定义方法
            methods: {}
        });
    </script>
</body>
</html>